<template>
  <div>
    <el-tag v-for="(item,index) in label_list" :key="index" size="small" :hit="index==hoverIndex" :class="{active : select_id == item.id}"
      @click="selected(item)" @mouseover.native="hoverIndex = index" @mouseout.native="hoverIndex = -1" style="margin-right:5px;margin-bottom:5px;">
      {{item.name}}</el-tag>
  </div>
</template>
<script>
import { getGiftLabelList } from '@/api/common/gift.js';
export default {
  name: 'DjGiftLabelSelect',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    },
    from: {
      type: Number,
      default: 0
      // 1：供应商，2：中央仓
    },
    usedfor: {
      type: Number,
      default: 0
      // 1:运管系统采购下单，2：采购平台总部下单，3：采购平台总部统配
    }
  },
  data() {
    return {
      select_id: '',
      hoverIndex: -1,
      label_id: '',
      label_name: '',
      label_instructions: '',
      label_list: []
    };
  },
  created() {
    this.getLabelList();
  },
  methods: {
    selected(item) {
      if (this.select_id == item.id) this.select_id = '';
      else this.select_id = item.id;
      let val = {
        label_id: this.select_id
      };
      this.$emit('select', val);
    },
    getLabelList() {
      if (this.label_list && this.label_list.length > 0) return;
      getGiftLabelList({}).then(response => {
        console.log(response, 'zst getGiftLabelList');
        if (response) this.label_list = response;
        else this.label_list = [];
      });
    }
  }
};
</script>
<style scoped>
.active {
  background: #fd7522;
  /* border: 1px solid #fd7522; */
  color: #fff;
}
</style>